// import axios from 'axios';
import React, { Component } from 'react'
import './index.css'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper';
import 'swiper/css';
import withRightNav from '../../components/hoc/withRightNav';
import { addCartAction } from '../../store/actions/cart';
import { connect } from 'react-redux';
import { fetchItemData } from '../../store/actions/wzdata';
class Item extends Component {
    constructor() {
        super();
        this.state = {
            swiperList: [],
            detailList: [],
            itemObj: {
                templateInfo: ""
            },
            realIndex: 1,
        }
    }
    componentDidMount() {
        this.props.fetchItemData(this.props.match.params.id);
        // axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commodityDetail', { "ptKey": this.props.match.params.id, "memberKey": "", "isWholeSale": 0, "channelId": null }).then(
        //     (res) => {
        //         console.log(res);
        //         this.setState({
        //             itemObj: res.data.data.templateInfo,
        //             swiperList: res.data.data.templateInfo.bannerImages.split(","),
        //             detailList: res.data.data.templateInfo.detailImages.split(",")
        //         })
        //     }
        // )
        // console.log(this.props.cart);
    }
    addCart = () => {
        // console.log(this.state.itemObj);
        const { ptKey, name, listImages, retailPrice, displayName } = this.props.itemObj;
        const data = {
            id: ptKey,
            name,
            pic: listImages,
            price: retailPrice,
            num: 1,
            displayName,
            checked: true
        }
        this.props.addCartAction(data);
    }
    goCart = () => {
        this.props.history.push('/cart');
    }
    render() {
        // console.log(this.props);
        let { itemObj } = this.props;
        console.log();
        let { realIndex } = this.state;
        let swiperList = itemObj.bannerImages.split(",") || [];
        let detailList = itemObj.detailImages.split(",") || [];
        // let swiperList = itemObj.bannerImages.split(",");
        // let detailList = itemObj.detailImages.split(",")
        // let swiperList = [];
        // let detailList = [];
        let count = 0;
        this.props.cart.forEach((element) => {
            count += element.num;
        });
        return (
            <div className='item'>
                <Swiper className='itemswiper'
                    modules={[Autoplay]}
                    pagination={{ clickable: true }}
                    onSlideChange={(swiper) => {
                        this.setState({
                            realIndex: swiper.realIndex + 1
                        })
                    }}
                    // onSwiper={(swiper) => this.setState({ myswiper: swiper })}
                    autoplay={{ delay: 2000, disableOnInteraction: false }}
                    loop={true}
                >
                    {
                        swiperList.map((item, index) =>
                            <SwiperSlide key={index}><img src={item} alt=""></img></SwiperSlide>)
                    }
                    <span className='swiper-auto'>{realIndex}/{swiperList.length}</span>
                </Swiper>
                <div className='ceo-buy'>
                    <span className='ceoText-l'>开通旺旺会员，购买立省{(itemObj.retailPrice - itemObj.supplyPrice).toFixed(1)}元</span>
                    <span className='ceoText-r'>立即开通</span>
                </div>
                <div className='price-wrap'>
                    <div className='detail__retailPrice'>
                        <span className='moneyText'>￥</span>
                        <span className='retailPrice_val'>{itemObj.retailPrice}</span>
                        <span className='priceText'>/{itemObj.soldUnit}</span>
                    </div>
                    <div className='details_ceoBuy'>￥{itemObj.supplyPrice}</div>
                    <div className='ceoTip'></div>
                </div>
                <div className='sell-num'>已售：{itemObj.sold}{itemObj.soldUnit}</div>
                <div className='name-wrap'>
                    <div className='item-name'>{itemObj.name}</div>
                    <div className='collect'>
                        <div className='share-icon'></div>
                        <div className='collectionText'>收藏</div>
                    </div>
                </div>
                <div className='detailDescription'>{itemObj.description}</div>
                <div style={{ height: '10px', backgroundColor: 'rgb(247, 247, 247)', marginTop: '10px' }}></div>
                <div className='service-box'>
                    <span className='service__lab'>已选</span>
                    <div className='checked_lab'>
                        <span>{itemObj.displayName}</span>
                        <div className='imgArrow'></div>
                    </div>
                </div>
                <div className='service-box'>
                    <span className='service__lab'>促销</span>
                    <div className='checked_lab'>
                        <div style={{ backgroundImage: 'url("https://hotkidceo-1251330842.file.myqcloud.com/static/home/gift.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '36px', height: '14px' }}></div>
                        <span>本商品当前正在参与{itemObj.startSaleNum}项满赠活动</span>
                        <div className='imgArrow'></div>
                    </div>
                </div>
                <div style={{ height: '10px', backgroundColor: 'rgb(247, 247, 247)', marginTop: '10px' }}></div>
                <div className='service-box'>
                    <span className='service__lab'>服务</span>
                    <div className='checked_lab'>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>企业文化</span>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>品质保证</span>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>快速发货</span>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>售后无忧</span>
                        <div className='imgArrow'></div>
                    </div>
                </div>
                <div style={{ height: '10px', backgroundColor: 'rgb(247, 247, 247)', marginTop: '10px' }}></div>
                <div className='p-md'>
                    <div className='mb-md'>
                        <div className='title__lab'>商品详情</div>
                    </div>
                    {
                        detailList.map((item, index) => <img className='detail-img' src={item} key={index} alt=""></img>)
                    }
                </div>
                <div className='footer'>
                    <div className='btn-contact'>
                        <div className='icon-service'></div>
                        <div className='text-service'>客服</div>
                    </div>
                    <div className='btn-cart'>
                        <div className='icon-cart'>
                            <span className='cart-count' style={{ display: count !== 0 ? 'inline-block' : 'none' }}>{count}</span>
                        </div>
                        <div className='text-cart' onClick={this.goCart}>购物车</div>
                    </div>
                    <div className='btn-addCart' onClick={this.addCart}>
                        <div className='button-image'></div>
                        <div className='button-title' >加入购物车</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    state => ({
        cart: state.cart, itemObj: state.wzdata.itemObj || {
            detailImages: "",
            bannerImages: ""
        }
    }),
    { addCartAction, fetchItemData }
)(withRightNav(Item));